<template>
    <!-- 判断 可以借鉴日收益详情 daily_earnings_details -->
    <s-layout id="layout" :title="'发票详情'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            
            <view class="area form_box">
                <!-- 点击复制发票信息 -->
                <view class="copy" @tap="copyMessage">
                    <!-- 图片 -->
                    <view class="image_box">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/icon_invoicecopy@2.png`" mode="scaleToFill"/>
                    </view>
                    <!-- 文字 -->
                        <view class="wordage">
                            点击复制发票信息
                        </view>
                </view>
                <scroll-view scroll-y :style="{ height: jurisdiction.includes(group_id)? '71vh' : 'calc(71vh + 80rpx)' }" :enable-back-to-top="true">
                    <!-- 用户信息 发票信息 大盒子 -->
                    <view class="totality_box">
                        <!-- <view class="head_box">
                            <view class="avatar_box">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff/lizhien03.png`" mode="aspectFill"/>
                            </view>
                            <view class="message">
                                <view class="title">IU李知恩提交的发票</view>
                                <view class="time">2024-04-11 11:50 提交</view>
                            </view>
                        </view> -->

                        <!-- 发票信息内容 -->
                        <view>
                            <u--form labelPosition="left" :model="FormData" :rules="rules" ref="formRole" :borderBottom="false">
                            <!-- 公司名称 -->
                            <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="公司名称：" prop="company_name" ref="company_name">
                                <u--input :disabled="!jurisdiction.includes(group_id)" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" v-model="FormData.company_name" border="none"></u--input>
                            </u-form-item>

                            <!-- 税号 -->
                            <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="税号：" prop="tax_number" ref="tax_number">
                                <u--input :disabled="!jurisdiction.includes(group_id)" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" v-model="FormData.tax_number" border="none"></u--input>
                            </u-form-item>

                            <!-- 银行账号 -->
                            <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="银行账号：" prop="account_number" ref="account_number">
                                <u--input :disabled="!jurisdiction.includes(group_id)" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" v-model="FormData.account_number" border="none"></u--input>
                            </u-form-item>

                            <!-- 电话 -->
                            <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="电话：" prop="tel" ref="tel">
                                <u--input :disabled="!jurisdiction.includes(group_id)" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" v-model="FormData.tel" border="none"></u--input>
                            </u-form-item>

                            <!-- 联行号 -->
                            <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="联行号：" prop="bank_key" ref="bank_key">
                                <u--input :disabled="!jurisdiction.includes(group_id)" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" v-model="FormData.bank_key" border="none"></u--input>
                            </u-form-item>

                            <!-- 开户行名称 -->
                                <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="开户行名称：" prop="account_with_bank" ref="account_with_bank">
                                </u-form-item>
                                <view class="textarea_box">
                                    <up-textarea :disabled="!jurisdiction.includes(group_id)" height="80" v-model="FormData.account_with_bank"></up-textarea>
                                </view>

                            <!-- 公司地址 -->
                                <u-form-item :required="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="公司地址：" prop="address" ref="address">
                                </u-form-item>
                                <view class="textarea_box">
                                    <up-textarea :disabled="!jurisdiction.includes(group_id)" height="80" v-model="FormData.address"></up-textarea>
                                </view>

                                <!-- 占位 -->
                                <view class="placeholder"></view>
                            </u--form>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view v-if="jurisdiction.includes(group_id)">
        <s-button @leftNetWork="cancellation" @rightNetWork="submitEdit"  :leftWidth="'50%'" :rightWidth="'50%'" :type="'twobutton'" :oneText="'删除'" :twoText="'修改'" />
    </view>
    <up-modal :show="delete_show" :showCancelButton="true" @confirm="delete_confirm" @cancel="delete_cancel" :content="'您确定要删除这条数据么？'"></up-modal>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { isEmpty } from '@/sheep/helper/utils.js'
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad((option) => {
        group_id.value = userStore.userInfo.group_id
        ids.value = option.ids
        FormData.ids = option.ids
        let params = {
            ids:option.ids
        }
        invoiceViewData(params)
    })
    const FormData = reactive({
        ids:'',                     // 哪条数据
        company_name:'',            // 公司名称
        tax_number:'',              // 税号
        address:'',                 // 地址
        account_number:'',          // 银行帐号
        account_with_bank:'',       // 开户行名称
        bank_key:'',                // 联行号
        tel:''                      // 电话
    })

    // 电话号验证格式
    const mobileReg = /^1[3-9]\d{9}$/;
    const rules = {
        company_name:[
            {
                required:true,
                message:'请输入公司名称',
            },
        ],
        tax_number:[
            {
                required:true,
                message:'请输入税号',
            },
        ],
        address:[
            {
                required:true,
                message:'请输入地址',
            }
        ],
        account_number:[
            {
                required:true,
                message:'请输入银行卡号',
            },
            {
                type: 'number',
                message: '银行卡号必须为数字格式',
            }
        ],
        account_with_bank:[
            {
                required:true,
                message:'请输入开户行名称',
            }
        ],
        tel:[
            {
                required:true,
                message:'请输入电话号',
            },
        ]
    }
    const formRole = ref(null)

    const ids = ref()
    const userStore = sheep.$store('user');
    const group_id = ref()
    const jurisdiction = ref([4,6])

    // 封装发票详情接口
    const invoiceViewData = async (params) => {
        const res = await sheep.$api.invoice.invoiceViewAPI(params)
        FormData.company_name = res.data.company_name
        FormData.tax_number = res.data.tax_number
        FormData.address = res.data.address
        FormData.account_number = res.data.account_number
        FormData.account_with_bank = res.data.account_with_bank
        FormData.bank_key = res.data.bank_key
        FormData.tel = res.data.tel
        copy_message.value = `公司名称：${FormData.company_name}\n税号：${FormData.tax_number}\n公司地址：${FormData.address}\n开户行名称：${FormData.account_with_bank}\n银行账号：${FormData.account_number}\n电话：${FormData.tel}\n联行号：${FormData.bank_key}`
    }

    // 复制信息
    const copy_message = ref('')
    const copyMessage = () => {
        // uni.setClipboardData({
        //     data:copy_message.value,
        //     success:() => {
        //         sheep.$helper.toast('复制成功')
        //     }
        // })
        sheep.$helper.copyText(copy_message.value)
    }

    // 删除发票
      //删除 (展示模态窗)
    const delete_show = ref(false)
    const cancellation = ()=>{
        delete_show.value = true
    }

    // 删除按钮（确定）
    const delete_confirm = async () => {
        let params = {
            ids:ids.value
        }
        const resust = await sheep.$api.invoice.invoiceDelAPI(params)
        if(resust.code == 1) {
            setTimeout(() => {
                sheep.$router.back(true)
                // uni.navigateBack()
            },1000)
        } else {
            setTimeout(() => {
                sheep.$helper.toast(res.msg);
                // uni.showToast({
                //     title:resust.msg,
                //     icon:'none'
                // })
            },1000)
        }
    }

    // 删除按钮（取消）
    const delete_cancel = () => {
        delete_show.value = false
    }

    // 修改发票
    const submitEdit = () => {
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.invoice.invoiceEditAPI(FormData);
            if(resust.code == 1) {
                setTimeout(() => {
                    sheep.$router.back(true)
                },1000)
            } else {
                setTimeout(()=> {
                    sheep.$helper.toast(res.msg);
                    // uni.showToast({
                    //     title:res.msg,
                    //     icon:'none'
                    // })
                },1000)
            }
        }).catch((err) => {})
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body){
        height: 80rpx;
        margin-bottom:10rpx;
    }

    // uview 内部样式 u-form-item 背景颜色
    :deep(.u-form-item){
        &:nth-last-child(2) {
            .u-form-item__body {
                margin-bottom:10rpx;
                background-color: #ffffff !important;
            }
        }
        &:nth-last-child(4) {
            .u-form-item__body {
                margin-bottom:10rpx;
                background-color: #ffffff !important;
            }
        }
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
        margin-bottom:10rpx;
    }

    // uview 内部样式 表单验证 警告文字距离
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 0 !important;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field.data-v-31706dd7) {
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 up-textarea 圆角
    :deep(.u-textarea--radius.data-v-31706dd7) {
        border-radius: 18rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 40rpx);
        // padding: 60rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }
    // 备注
    .remark {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }

    // 点击复制发票信息
    .copy {
        width: 100%;
        height: 96rpx;
        background-color: #F9FAFF;
        border-top-right-radius: 16rpx;
        border-top-left-radius: 16rpx;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        // 图片
        .image_box {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        // 字体
        .wordage {
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: 700;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
    }
    // 用户信息 && 发票信息 大盒子
    .totality_box {
        padding: 0 30rpx;
        width: calc(100% - 60rpx);
        // 用户信息盒子
        .head_box {
            height: 164rpx;
            background-color: $uni-bg-color;
            border-bottom: 2rpx solid #efefef;
            display: flex;
            align-items: center;
            // 头像盒子
            .avatar_box {
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
                margin-right: 30rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            // 信息盒子
            .message {
                .title {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                    margin-bottom: 12rpx;
                }
                .time {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                }
            }
        }
    }

    // 占位
    .placeholder {
        height: 40rpx;
    }

</style>


